<template>
  <div>
    <!-- 图片，把它当作按钮 -->
    <div class="btn_img" @click="openDialog()">
      <img :src="imageUrl" />
    </div>

    <!-- 对话框 -->
    <el-dialog
      append-to-body
      title="选择素材" :visible.sync="dialogVisible">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="素材库" name="images">
            <!-- 素材库选项卡的具体内容 -->
            <div>
              <el-radio-group v-model="isCollected" size="small" @change="hSwitchCollect">
                <el-radio-button :label="false">全部</el-radio-button>
                <el-radio-button :label="true">收藏</el-radio-button>
              </el-radio-group>
            </div>
            <el-row style="margin-top: 20px" :gutter="10">
              <el-col class="img_item" :span="4"
                v-for="image in images" :key="image.id"
                :class="{selected: selectedImageUrl===image.url}"
                >
                <el-image
                  style="height: 100px;"
                  fit="cover"
                  :src="image.url"
                  @click="hSelectImage(image.url)"
                ></el-image>
              </el-col>
            </el-row>

            <!-- 分页组件
              1. total是总条数。
              2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
              3. page-size: 默认10，它会以每页10条进行计算总页数
              -->
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              @current-change="hPageChange"
              :total="total_count">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="上传图片" name="upload">
            <!-- 上传图片选项卡的具体内容 -->
            <el-upload
              class="avatar-uploader"
              action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
              :headers="headers"
              name="image"
              :show-file-list="false"
              :on-success="hSuccess"
              :before-upload="beforeAvatarUpload">
                <!-- 当上传成功之后，imageUrl就会有值，此时做预览
                  给img设置了src后，显示图片内容的过程是异步的 ---- 并不是设了src后就可以立即看到图片的

                  问：你怎么知道图片已经完成了加载？
                -->
                <el-image v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" @load="hLoadUploadImage" />
                <!-- 没有上传之前，这里是一个大大的 + -->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-tab-pane>
        </el-tabs>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="hConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
// 当你 import 图片 from '....../png'
// webpack 会自动出来 帮你做导入。
//         把它转base64
import defaultImage from '../assets/default.png'
const obj = {
  name: 'cover',
  props: ['value'], // 接收v-model上传入的值
  data () {
    return {
      dialogVisible: false, // 是否要显示对话框
      isCollected: false, // 是否收藏
      images: [], // 素材列表
      page: 1, // 当前页码
      total_count: 0, // 素材列表的总条数

      selectedImageUrl: '', // 记录当前用户选中的是哪一张图片（url）
      imageUrl: this.value || defaultImage,
      // imageUrl: '../assets/default.png', // 图片按钮
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      uploadImageUrl: '', // 上传成功之后的预览图片地址
      activeName: 'images' // 选择项中默认选中是那一项
    }
  },
  methods: {
    // 用户点击图片按钮
    // 1. 显示对话框
    // 2. 获取素材信息
    // 3. 重置
    openDialog () {
      this.dialogVisible = true

      // 重置
      this.selectedImageUrl = this.uploadImageUrl = ''

      this.loadImages()
    },
    buildParams () {
      const paramsObj = {}
      paramsObj.page = this.page
      paramsObj.per_page = 10
      paramsObj.collect = this.isCollected
      return paramsObj
    },
    async loadImages () {
      // 发请求，获取素材数据
      // 1. 组装参数
      const paramsObj = this.buildParams()
      // 2. 填空题
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params: paramsObj
        })
        this.images = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        this.images = []
        this.total_count = 0
      }
    },
    // 用户在 收藏 和 全部 之间切换
    hSwitchCollect () {
      // 1. 重置页码
      this.page = 1
      // 2. 重发请求
      this.loadImages()
    },
    // 用户点击了分页页码，此时会自动接收传入的页码
    hPageChange (curPage) {
      // 1. 更新页码
      this.page = curPage
      // 2. 重发请求
      this.loadImages()
    },
    // 用户在某张图片上点击，表示用户选中了这张图
    hSelectImage (url) {
      // console.log(1)
      this.selectedImageUrl = url
    },
    handleClick () {

    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      // file.size 单位是字节
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hSuccess (res) {
      // res中保存着本次上传操作成功后，后端接口返回的数值
      // 1. 预览效果
      this.uploadImageUrl = res.data.url
      // console.log('文件上传成功', res, file)
      this.$message.success('上传成功')
    },
    // 用户在对话框中点击了确认
    hConfirm () {
      // 1. 趁早返回 2. 减少嵌套
      // 检测用户的选择是否合法，否则给出提示，并返回

      if (this.activeName === 'images' && !this.selectedImageUrl) {
        this.$message.error('你必须在图表列中的选中一项')
        return
      }

      if (this.activeName === 'upload' && !this.uploadImageUrl) {
        this.$message.error('你必须先上传一张图')
        return
      }

      this.imageUrl = this.activeName === 'images'
        ? this.selectedImageUrl
        : this.uploadImageUrl

      // 关闭弹层
      this.dialogVisible = false

      // 抛出事件，携带新数据，来修改父组件上的v-model中绑定的值
      this.$emit('input', this.imageUrl)
    },
    hLoadUploadImage () {

    }
  }
}
export default obj
// this.data中的数据项
// this.计算属性
// this.方法
// this.侦听器
// this.filters
// this.$route, this.$emit, this.$refs, this......

// Com.prototype = Object.create(Vue.prototype); Vue.extend(obj)
// 组件1 = new Com()
// 组件2 = new Com()
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.avatar-uploader {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ddd;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// 表示当前图片是选中的
  .selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表

  .img_item{
   position: relative;
    /deep/ img {
     cursor: pointer;
   }
  }
</style>
